<template>
<div class="guide">
  <h1 style="color: #f4f4f5;letter-spacing: 0.15em">本院就诊指南</h1>
  <div class="guide-content">
    <el-image :src="url" fit="contain" style="border-radius: 30px;"></el-image>
    <p class="tips">提醒:本院就诊步骤流程以上图为主！如有疑问，请咨询医院前台服务！</p>
    <p class="tips">前台热线:123456</p>
  </div>
</div>
</template>

<script>
export default {
  name: "Index",
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  data(){
    return{
      url: '/Guide.jpg'
    }
  }
}
</script>

<style scoped>
.tips{
  color: white;
  letter-spacing: 0.15em;
}
.guide-content{
  position: relative;
  border-radius: 30px;
  width: 1000px;
  height: 450px;
  background: rgba(255,255,255,0.3);
  margin: 0 auto;
  padding: 10px 10px 60px 10px;
  z-index: 1
}
.guide-content:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('../../assets/background.jpg') 0 / cover fixed;
  filter: blur(10px);
  z-index: -1;
}
.guide{
  position: relative;
  width: 100%;
  height: 600px;
}

</style>